<template>
  <div class="breadcrumb-container">
    <a-breadcrumb separator="|">
      <a-breadcrumb-item>
        <span style="cursor: pointer;" @click="onHistoryBack">
          <a-icon type="left" class="back" />
          <span class="breadcrumb-text back">返回</span>
        </span>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <span class="breadcrumb-text">{{ text }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script lang="ts">
/**
 * header of Back bar
 * @author Tao Zhang
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class BackBarHeader extends Vue {
  @Prop({
    default() {
      return ' '
    },
  })
  public text!: string

  // 返回
  public onHistoryBack() {
    if (window.history.length > 1) {
      this.$router.go(-1)
    } else {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.breadcrumb-container {
  align-items: center;
  background: #fff;
  display: flex;
  flex-direction: row;
  height: 63px;
  justify-content: space-between;
}
// 标题分隔符
.ant-breadcrumb-separator {
  font-size: 18px;
}

.ant-breadcrumb {
  margin-left: 28px;
}

.breadcrumb-text {
  font-size: @TEXT_FONT_SIZE_BIG;
  font-weight: bold;
}

.back {
  color: #6973ff;
  margin-right: 8px;
  margin-top: 8px;
}
</style>
